<template>

    <div class="login">
        <van-nav-bar
                fixed
                left-text="返回"
                right-text="注册"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
                title="登录"
        />
        <h1>登录</h1>
        <van-form validate-first @failed="onFailed" @submit="handleSubmit">
            <!-- 通过 validator 进行函数校验 -->
            <van-field
                    label-width="4.5em"
                    label="手机号"
                    v-model="mobile"
                    name="mobile"
                    placeholder="请输入手机号"
                    :rules="[{ validator:validatorMobile, message: '请输入正确手机号' }]"
            />
            <!-- 通过 validator 进行函数校验 -->
            <van-field
                    label-width="4.5em"
                    label="密码"
                    type="password"
                    v-model="password"
                    name="password"
                    placeholder="请输入密码"
                    :rules="[{ validator, message: '请输入密码' }]"
            />

            <!-- 通过 validator 进行函数校验 -->
            <van-field
                    label-width="4.5em"
                    v-model="code"
                    name="code"
                    center
                    clearable
                    label="验证码"
                    placeholder="请输入短信验证码"
                    :rules="[{ validator:validatorCode, message: '请输入密码' }]"
            >
                <template #button>
                    <van-button size="small" type="primary" @click="handleSendCode">发送验证码</van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
            return{
                mobile: '',
                password: '',
                code:''
            }
        },
        methods:{
            //code验证码
            validatorCode(val){
                return !!val
            },
            //发送验证码
            handleSendCode(e){

                e.preventDefault()
            },
            //提交表单
            handleSubmit(e){
                window.localStorage.setItem('name','xxx')
                this.$router.back(-1)
                console.log('1',e)
            },
            // 校验函数返回 true 表示校验通过，false 表示不通过
            validatorMobile(val){
                return !!val
            },
            // 校验函数返回 true 表示校验通过，false 表示不通过
            validator(val) {
                return !!val
            },
            onFailed(errorInfo) {
                console.log('failed', errorInfo);
            },
            onClickLeft() {
                this.$router.back(-1)

            },
            onClickRight() {
                this.$router.push({
                    name:'register'
                })
            },
        }
    }
</script>

<style scoped lang="scss">
.login{
    padding: 40px;
}
</style>
